<template>
  <el-select
    :modelValue="modelValue"
    @update:modelValue="emit('update:modelValue', $event)"
    filterable
    :loading="loading"
    placeholder="请选择规格"
  >
    <el-option
      v-for="spec in specList"
      :key="spec.id"
      :label="spec.name + '：' + spec.specValueList.map(specValue => specValue.name).join(' ')"
      :value="spec.id"
    ></el-option>
  </el-select>
</template>

<script setup>
// 1. 导入依赖
import { getSpecAPI } from "@/apis/goods.js";
import { ref } from "vue";

// 2. 定义Props和Emits
const props = defineProps({
  modelValue: {
    type: [Number, String],
  },
});

const emit = defineEmits(["update:modelValue"]);

// 3. 定义响应式数据
const specList = ref([]);
const loading = ref(false);

// 4. 定义方法并立即调用以获取数据
const getSpec = async () => {
  loading.value = true;
  const res = await getSpecAPI();
  specList.value = res.data;
  loading.value = false;
};

getSpec(); // 立即调用以初始化数据
</script>